<template>
  <!-- 饼图 -->
  <div :id="id" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "50vh",
    },
  },
  data() {
    return {
      chart: null,
    };
  },

  methods: {
    initChart(chartData, total) {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption({
        tooltip: {
          trigger: "item",
        },
        title: [
          {
            // 第一个圆环标题
            text: "合计总金额", // 主标题
            textStyle: {
              color: "#000",
              fontSize: 18,
            },
            left: "48%", // 定位到适合的位置
            top: "55%", // 定位到适合的位置
            subtext: total, // 副标题
            subtextStyle: {
              // 副标题样式
              color: "#333",
              fontSize: 20,
            },
            textAlign: "center", // 主、副标题水平居中显示
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            label: {
              normal: {
                formatter: '{b}\n{c}%'
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: chartData,
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
